<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-button disabled>未放款合同</el-button>
        <el-button type="success" round>
            <router-link to="/contractManage">查看所有合同</router-link>
        </el-button>
        <el-button type="info" round>
            <router-link to="/loanDone">查看已放款合同</router-link>
        </el-button>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="empId" label="员工id"> </el-table-column>
        <el-table-column prop="product.name" label="产品名称">
        </el-table-column>
        <el-table-column
          prop="user.name"
          label="客户名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="number" label="合同编号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="money" label="贷款金额" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="time" label="贷款时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="loan" label="是否放款" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="debt" label="所欠贷款" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="acceptAccount"
          label="收款账号"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="confirmLoan(scope.$index, scope.row)"
              >放款</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button @click="loanAll()">全部放款</el-button>
      </div>
    </el-main>

    <!-- 弹出框 -->
    <el-dialog title="合同修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <!-- 合同编号 -->
        <el-form-item label="合同编号" :label-width="formLabelWidth">
          <el-input
            v-model="form.number"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <!-- 产品选择 -->
        <el-form-item label="产品选择" :label-width="formLabelWidth">
          <el-select v-model="form.proId" placeholder="请选择产品">
            <el-option
              v-for="item in products"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <!-- 员工id -->
        <el-form-item label="员工id" :label-width="formLabelWidth">
          <el-input v-model="form.empId" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 客户id -->
        <el-form-item label="客户id" :label-width="formLabelWidth">
          <el-input v-model="form.cusId" autocomplete="off" disabled></el-input>
        </el-form-item>
        <!-- 合同金额 -->
        <el-form-item label="贷款金额" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 是否放款 -->
        <el-form-item label="是否放款" :label-width="formLabelWidth">
          <el-input v-model="form.loan" autocomplete="off" disabled></el-input>
        </el-form-item>
        <!-- 收款账号 -->
        <el-form-item label="收款账号" :label-width="formLabelWidth">
          <el-input v-model="form.acceptAccount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateContract">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import server from "@/global.js";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false, //弹出框默认状态
      //   弹出框数据
      form: {
        proId: "",
        number: "",
        empId: "",
        cusId: "",
        money: "",
        loan: "",
        acceptAccount: "",
      },
      contracts:[],//所有需要放款的合同
      contract:{
        empId:"",//操作的业务员
        number:""//放款的合同编号
      },
      formLabelWidth: "120px", //弹出框宽度
      products: [], //所有产品信息
    };
  },
  created: function () {
    //根据当前业务员登录的id和账户查询业务员经手的合同
    this.$axios({
      url: server.server + "/api/contract/selectLoanStatusIsN",
      //   url: "http://localhost:8080/api/contract/selectLoanStatusIsN",
      method: "post",
      data: {
        emp: {
          id: 1,
          account: "admin",
        },
        status: "n",
      },
    }).then((r) => {
      if (r.data.code == 200) {
        this.tableData = r.data.data;
      } else {
        window.alert(r.data.message);
      }
    });
  },
  methods: {
    // 取消选中
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    //处理当前选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val;//当前选中
      console.log(this.multipleSelection);
    },
    //编辑
    handleEdit(index, row) {
      //发送请求得到所有产品的信息
      this.$axios({
        url: server.server + "/api/product/getAll",
        method: "post",
      }).then((r) => {
        console.log(r);
        if (r.data.code == 200) {
          this.products = r.data.data;
          this.form.proId = row.proId;
        }
      });
      this.form.number = row.number;
      this.form.empId = row.empId;
      this.form.cusId = row.cusId;
      this.form.money = row.money;
      this.form.loan = row.loan;
      this.form.debt = row.debt;
      this.form.acceptAccount = row.acceptAccount;
      this.dialogFormVisible = true;
      console.log(index, row);
    },
    //确定放款
    confirmLoan(index, row) {
      console.log(index, row);
      this.$axios({
        url: server.server + "/api/contract/updateLoan",
        method: "post",
        //此处需要得到员工的id
        data: {
          empId: 1,
          number: row.number,
        },
      }).then((r) => {
        if (r.data.code == 200) {
          alert(r.data.message);
          window.location.reload();
        } else {
          window.alert(r.data.message);
        }
      });
    },
    //全部放款
    loanAll(){
        this.multipleSelection.forEach(value=>{
            console.log(value);
            this.contract.empId=1;//暂时为1
            this.contract.number=value.number;
            this.contracts.push(this.contract);
        })
        this.contracts.forEach(value=>{
            console.log(value.empId+":"+value.number)
        })
        console.log(JSON.stringify(this.contracts));
        //执行放款
        this.$axios({
            url:server.server+"/api/contract/batchUpdateLoan",
            method:"post",
            data:this.contracts,
        }).then(r=>{
            if(r.data.code==200){
                window.alert(r.data.message);
                window.location.reload();
            }else{
                window.alert(r.data.message);
            }
            console.log(r);
        })

    },
    //执行合同更新操作
    updateContract: function () {
      if (this.form.loan == "y") {
        window.alert("当前合同已经放款，不能进行更新");
      } else {
        //执行更改
        this.$axios({
          url: server.server + "/api/contract/update",
          method: "post",
          data: this.form,
        }).then((r) => {
          if (r.data.code == 200) {
            window.alert("修改成功");
          } else {
            window.alert(r.data.message);
          }
        });
      }
      console.log(this.form);
    },
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row > el-col:last-child {
  margin-bottom: 20px;
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.grid-content.bg-purple {
  text-align: center;
}
</style>